<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>

<body>
<div th:replace="common/top">

</div>
<div id="wrapper">


<div id="Catalog">
<!--    <script type="text/javascript">-->
<!--        $(document).ready(function(){-->
<!--            $("#Cart").hide().fadeIn();-->
<!--        });-->
<!--    </script>-->

        <h2>Shopping Cart</h2>
<!--        <form action="updateCartQuantities" method="post">-->
        <form action="/cart/updateCartQuantities" method="get">
<!--            th:action="@{/cart/updateCartQuantities}" th:object="${cartItem}"-->
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

<!--                <c:if test="${sessionScope.cart.numberOfItems == 0}">-->

                <tr th:if ="${session.cart.numberOfItems} eq 0">
                        <td colspan="8" ><b>Your cart is empty.</b></td>
                    </tr>


                <section th:each="cartItem:${session.cart.cartItems}">
<!--                <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}" varStatus="status">-->
                    <tr>
                        <td>
                            <a th:text="${cartItem.item.itemId}" th:href="@{/catalog/viewItem(itemId=${cartItem.item.itemId})}"></a>
                        </td>

                        <td>
                            <label th:text="${cartItem.item.product.productId}" >productId</label>

                        </td>
<!--                            < th:text="${cartItem.item.product.productId}"></th>-->

                        <td>
                            <label th:text="${cartItem.item.attribute1}" >attribute1</label><label th:text="${cartItem.item.attribute2}" >attribute1</label>
                            <label th:text="${cartItem.item.attribute3}" >attribute1</label><label th:text="${cartItem.item.attribute4}" >attribute1</label>
                            <label th:text="${cartItem.item.attribute5}" >attribute1</label><label th:text="${cartItem.item.product.name}" >attribute1</label>
<!--                            <label th:text="${cartItem.item.attribute3}" th:text="${cartItem.item.attribute4}">attribute34</label>-->
<!--                            <label th:text="${cartItem.item.attribute5}" th:text="${cartItem.item.product.name}">attribute5</label>-->
<!--                            ${cartItem.item.attribute1} ${cartItem.item.attribute2}-->
<!--                            ${cartItem.item.attribute3} ${cartItem.item.attribute4}-->
<!--                            ${cartItem.item.attribute5} ${cartItem.item.product.name}-->
                        </td>
                        <td>
                            <label th:text="${cartItem.inStock}" >productId</label>
<!--                            ${cartItem.inStock}-->
                        </td>
                        <td>
                            <script type = "text/javascript">
                                function Update(data) {
                                    var quantity = document.getElementById(data).value;
                                    var listprice = document.getElementById(data+"listPrice").innerText;
                                    var username = '[[${session.account.username}]]';
                                    $.ajax({
                                        type  : "GET",
                                        url   : "/cart/updateCartItemQuantityAjax?itemId="+data+"&quantity="+quantity+"&username="+username,
                                        success : function (result) {
                                            var total = listprice*quantity;
                                            var s = total.toString().split(".");
                                            //total = parseFloat(total.toFixed(2));
                                            if(s.length==1){
                                                total=total.toString()+".00";
                                            }
                                            if(s.length>1){
                                                if(s[1].length<2){
                                                    total=total.toString()+"0";
                                                }
                                            }
                                            result = result.toFixed(2);
                                            $("#"+data+"total").html(total);
                                            $("#SubTotal").html(result);

                                        }
                                    });
                                }
                            </script>
                            <input type="text"  th:id="${cartItem.item.itemId}"  th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" th:onblur="Update([[${cartItem.item.itemId}]]);" />
<!--                            <script type="text/javascript" src="/static/js/updateCart.js"></script>-->
<!--                            <input type="text"  id="quantity"  th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" />-->
                        </td>


                        <td>

<!--                            <fmt:formatNumber value="${cartItem.item.listPrice}"-->
<!--                                              pattern="$#,##0.00" />-->
<!--                            <span th:text="'$'+${#numbers.formatDecimal(cartItem.item.listPrice,1,'COMMA',2,'POINT')}">money</span>-->
                            <span th:id="${cartItem.item.itemId}+listPrice" th:text="${#numbers.formatDecimal(cartItem.item.listPrice,1,'COMMA',2,'POINT')}">money</span>


                        </td>
                        <td>
                            <label th:id="${cartItem.item.itemId}+total" th:name="${cartItem.item.itemId}+total" th:text="${#numbers.formatDecimal(cartItem.total,1,'COMMA',2,'POINT')}">money</label>
<!--                            <label th:text="'$'+${#numbers.formatDecimal(cartItem.total,1,'COMMA',2,'POINT')}">money</label>-->
<!--                            <label id="${cartItem.item.itemId}" >${cartItem.total}</label>-->

                        </td>
                        <td>

                            <a th:href="@{/cart/removeItemFromCart(workingItemId = ${cartItem.item.itemId})}" class="Button" >Remove</a>
<!--                            <a href="removeItemFromCart?workingItemId=${cartItem.item.itemId}" class="Button" >Remove</a>-->
                        </td>
                    </tr>
                </section>

                <tr id="lastTR">
                    <td colspan="7" id="lastTD">
                        Sub Total: <label th:id="SubTotal" th:name="SubTotal" th:text="${#numbers.formatDecimal(session.cart.subTotal,1,'COMMA',2,'POINT')}">money</label>
<!--                        <label id="subtotal">${cart.subTotal}</label>-->
                        <input type="hidden" name="theQuantityBeenChanged" th:value="${session.cart.cartItems}">
<!--                        <input id = "updatedata" type="submit" value="Update Cart"/>-->
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>

       <tr th:if ="${session.cart.numberOfItems} gt 0">
<!--           href="/order/newOrderForm"-->
           <a th:href="@{/order/newOrderForm}" class="Button">Proceed to Checkout</a>
        </tr>

<!--        <c:if test="${sessionScope.cart.numberOfItems > 0}">-->
<!--            <a href="newOrderForm" class="Button">Proceed to Checkout</a>-->
<!--        </c:if>-->

    </div>

    <div id="Separator">&nbsp;</div>

</div>
<div th:replace="common/bottom">

</div>
</body>
</html>